---
title: はじめに
version: 1
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import pubspec from "./getting_started/pubspec";
import dartHelloWorld from "./getting_started/dart_hello_world";
import helloWorld from "./getting_started/hello_world";
import dartPubspec from "./getting_started/dart_pubspec";
import {
  trimSnippet,
  AutoSnippet,
  When,
} from "../../../../src/components/CodeSnippet";

___

## オンラインで Riverpod を試す

Riverpod の感覚を掴むために、[Dartpad](https://dartpad.dev/?null_safety=true&id=ef06ab3ce0b822e6cc5db0575248e6e2) で試してみましょう。

## パッケージのインストール

インストールするパッケージが決まったら、次のものを `pubspec.yaml` に追記してください:

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: 'Flutter', value: 'flutter_riverpod', },
    { label: 'Dart only', value: 'riverpod', },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet title="pubspec.yaml" language="yaml" {...pubspec}></AutoSnippet>

そして `flutter pub get` でパッケージをインストールしてください。

<When codegen={true}>
  最後に、 {" "} でコードジェネレータを実行してください。
  <code>flutter pub run build_runner watch</code>
</When>

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="pubspec.yaml"
  language="yaml"
  {...dartPubspec}
></AutoSnippet>

そして、 `dart pub get` でパッケージをインストールしてください。

<When codegen={true}>
  最後に、 {" "} でコードジェネレータを実行してください。
  <code>flutter pub run build_runner watch</code>
</When>

</TabItem>
</Tabs>

これで [Riverpod] がアプリに追加されました！

## 使用例: Hello world

[Riverpod] がインストールできたので、これを使うことができます。

以下のスニペットは新しい依存性を使って "Hello World" を表示する例です。

export const foo = 42;

<Tabs
  groupId="riverpod"
  defaultValue="flutter_riverpod"
  values={[
    { label: "Flutter", value: "flutter_riverpod" },
    { label: "Dart only", value: "riverpod" },
  ]}
>
<TabItem value="flutter_riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...helloWorld}
></AutoSnippet>

そして `flutter run` を実行してください。  
実行すると、デバイスに "Hello World" が表示されます。

</TabItem>
<TabItem value="riverpod">

<AutoSnippet
  title="lib/main.dart"
  language="dart"
  {...dartHelloWorld}
></AutoSnippet>

そして `dart lib/main.dart` を実行してください。  
実行すると、コンソールに "Hello World" が出力されます。

</TabItem>
</Tabs>

## 一歩先へ: コードスニペットのインストール

`Flutter` と `VS Code` を使っている場合、 [Flutter Riverpod Snippets](https://marketplace.visualstudio.com/items?itemName=robert-brunhage.flutter-riverpod-snippets) が利用できます。

`Flutter` と `Android Studio` もしくは `IntelliJ` を使っている場合、 [Flutter Riverpod Snippets](https://plugins.jetbrains.com/plugin/14641-flutter-riverpod-snippets) が利用できます。

![img](/img/snippets/greetingProvider.gif)

## 次のステップ

基本的なコンセプトを学ぶ:

- [プロバイダについて](/docs/concepts/providers)

使用例を学ぶ:

- [プロバイダのテスト](/docs/cookbooks/testing)

[riverpod]: https://github.com/rrousselgit/riverpod
[hooks_riverpod]: https://pub.dev/packages/hooks_riverpod
[flutter_riverpod]: https://pub.dev/packages/flutter_riverpod
[flutter_hooks]: https://github.com/rrousselGit/flutter_hooks